// 下拉树
.el-tree {
    &:not(.has-padding-left) {
        .el-tree-node {
            .el-tree-node__content {
                padding-left: 0 !important;
            }
        }
    }
    .el-tree-node {
        padding-left: 0px;
        font-size: 14px;
        line-height: $--tree-node-height;
        color: $font;
        font-weight: 400;
        .el-tree-node__children {
            padding-left: 16px;
        }
        .el-tree-node__expand-icon {
            font-size: 14px;
            color: $font;
            padding: 0;
            width: 24px;
            text-align: center;
            line-height: $--tree-node-height; //32px

            &.el-icon-caret-right {
                width: 24px;
                height: 24px;
                margin: 4px;
                background-color: $font;
                mask-image: url('../assets/svg-icon/common_angle_right_sm.svg');
                &::before {
                    content: none;
                }
            }

            &.is-leaf {
                position: relative;
                opacity: 0;
                width: 24px;
                height: 24px;
                display: block;
                box-sizing: border-box;

                &:before {
                    display: none;
                }
            }
        }
        // 控制行的颜色变化
        .el-tree-node__content {
            height: $--tree-node-height;
            // padding-left: 0 !important;
            margin-bottom: 2px;
            background-color: transparent;
            &::before {
                content: '';
                position: absolute;
                left: 4px;
                width: calc(100% - 8px);
                height: 32px;
                border-radius: 2px;
                pointer-events: none;
            }

            > .el-tree-node__label {
                z-index: 1;
                flex: 1;
                padding: 0 8px 0 0;
                @include ellipsis;
                line-height: 32px;
            }
            .el-checkbox {
                width: 24px;
                height: 24px;
                margin: 0 4px 0 -4px;
                text-align: center;
            }
        }
        // &.is-current {
        //     &:not(.is-disabled) &:not([aria-disabled='true']) {
        //         > .el-tree-node__content,
        //         > .el-tree-node__content:hover {
        //             &::before {
        //                 background-color: $--selected-primary;
        //             }
        //             > .is-leaf + .el-tree-node__label {
        //                 border-radius: 2px;
        //             }
        //         }
        //     }
        // }
        &.is-current:not(.is-disabled):not([aria-disabled='true']) {
            > .el-tree-node__content,
            > .el-tree-node__content:hover {
                &::before {
                    background-color: $--selected-primary;
                }
                > .is-leaf + .el-tree-node__label {
                    border-radius: 2px;
                }
            }
        }
        &.is-checked {
            > .el-tree-node__content,
            > .el-tree-node__content:hover {
                &::before {
                    background-color: $--selected-primary;
                }
                > .is-leaf + .el-tree-node__label {
                    border-radius: 2px;
                }
            }
        }
        &:focus > .el-tree-node__content {
            background-color: transparent;
        }
        &[aria-disabled='true'] {
            color: getColorVar(--black, 0.3);
            > .el-tree-node__content .el-tree-node__label {
                cursor: default;
            }
        }
        &:not(.is-disabled):not([aria-disabled='true']) {
            > .el-tree-node__content:hover {
                background-color: transparent;
                &::before {
                    content: '';
                    background-color: $--hover-primary;
                }
            }
        }
    }
}
